<template>
	
	<view>
		
		<!-- #ifdef APP-PLUS || H5 -->
		<public-navbar><text style="margin-left: 30rpx;">提现记录</text></public-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<public-fixed-box top>
			<public-navbar>提现记录</public-navbar>
		</public-fixed-box>
		<!-- #endif -->
		<z-paging ref="paging" v-model="dataList" @query="queryList">
		<view class="container" style="padding:20rpx 20rpx;background-color: #F5F5F5;height: 100%;">
			<view v-for="(item, index) in dataList" :key="index" class="payment-selection-group" style="padding: 20rpx 30rpx;border-radius: 10rpx;margin-top: 20rpx;"  @click="toDetail(item)" >
				<text style="font-weight: bold;font-size: 15px;">账户提现</text> <text v-if="item.status == 1" style="font-size: 12px;color: darkseagreen;padding-left: 20rpx;">提现成功</text> <text v-if="item.status == 2" style="font-size: 12px;color: brown;padding-left: 20rpx;">拒绝提现</text>
				<view class="payment-selection-list" style="width: 100%;text-align: center;font-size: 15px;margin-top: 30rpx;">
					提现金额
				</view>
				<view class="payment-selection-list" style="width: 100%;text-align: center;font-size: 17px;font-weight: bold;margin-top: 10rpx;">
					￥{{ item.amount }}
				</view>
				<view class="payment-selection-list" style="width: 100%;text-align: center;font-size: 13px;margin-top: 10rpx;padding-bottom: 30rpx;border-bottom: #eee solid 1px;">
					预计到账：￥{{ item.real_amount }} 手续费：￥{{ item.commission }}
				</view>
				<view style="display: flex;margin-top: 30rpx;">
					<view style="font-size: 13px;color: #a1a1a1;width: 25%;">提现进程</view>
					<view style="font-size: 12px;width: 75%;">
						<view style="display: flex;width: 100%;align-items: center;">
							<view style="width: 5%;text-align: center;">
								<view style="width: 16rpx;height:16rpx;border-radius: 8rpx;background-color: aqua;"></view>								
							</view>
							<view style="width: 35%;">提现申请已提交 </view>
							<view style="width: 60%;text-align: right;">{{formatDateTime(new Date(item.createtime*1000))}}</view>
						</view>
						<view style="height: 30rpx;width: 100%;">
							<view style="width: 8rpx;border-right: #a1a1a1 dashed 1px;height: 30rpx;">
							</view>
						</view>
						<view style="display: flex;width: 100%;align-items: center;">
							<view style="width: 5%;text-align: center;">
								<view style="width: 16rpx;height:16rpx;border-radius: 8rpx;background-color: aqua;"></view>								
							</view>
							<view style="width: 40%;">审核中 </view>
							<view style="width: 60%;text-align: right;">{{formatDateTime(new Date((item.createtime+30)*1000))}}</view>
						</view>
						<view style="height: 30rpx;width: 100%;">
							<view style="width: 8rpx;border-right: #a1a1a1 dashed 1px;height: 30rpx;">
							</view>
						</view>
						<view v-if="item.status != 2" style="display: flex;width: 100%;align-items: center;">
							<view style="width: 5%;text-align: center;">
								<view v-if="item.status == 0" style="width: 16rpx;height:16rpx;border-radius: 8rpx;background-color: #a1a1a1;"></view>								
								<view v-else style="width: 16rpx;height:16rpx;border-radius: 8rpx;background-color: aqua;"></view>		
							</view>
							<view style="width: 40%;">到账成功 </view>
							<view v-if="item.status == 1" style="width: 60%;text-align: right;">{{formatDateTime(new Date(item.audittime*1000))}}</view>
						</view>
						<view v-if="item.status == 2" style="display: flex;width: 100%;align-items: center;">
							<view style="width: 5%;text-align: center;">
								<view style="width: 16rpx;height:16rpx;border-radius: 8rpx;background-color: brown;"></view>								
							</view>
							<view style="width: 40%;">审核失败 </view>
							<view style="width: 60%;text-align: right;">{{formatDateTime(new Date(item.audittime*1000))}}</view>
						</view>
					</view>
				</view>
				
				<view style="display: flex;margin-top: 40rpx;">
					<view style="font-size: 13px;color: #a1a1a1;">{{item.type_str}}</view>
					<view style="font-size: 13px;">{{item.type_num}}</view>
				</view>
	<!-- 			<view style="display: flex;margin-top: 20rpx;">
					<view style="font-size: 13px;color: #a1a1a1;">提现单号：</view>
					<view style="font-size: 13px;">fkdhd234723842934</view>
				</view> -->
				<view style="display: flex;margin-top: 20rpx;">
					<view style="font-size: 13px;color: #a1a1a1;">申请时间：</view>
					<view style="font-size: 13px;">{{formatDateTime(new Date(item.createtime*1000))}}</view>
				</view>
				<view style="display: flex;margin-top: 20rpx;padding-bottom: 30rpx;">
					<view style="font-size: 13px;color: #a1a1a1;">完成时间：</view>
					<view v-if="item.status > 0" style="font-size: 13px;">{{formatDateTime(new Date(item.audittime*1000))}}</view>
				</view>
			</view>
			<u-gap height="24" bg-color="#F5F5F5"></u-gap>
		</view>
		
		</z-paging>
		<!-- <public-fixed-box bottom>
			<button class="payment-confirm" @click="confirmWithdraw()" :disabled="canWithdraw">确认提现</button>
		</public-fixed-box> -->
		<!-- <view style="height: 100rpx;background-color: #F5F5F5;"></view> -->
	</view>
</template>

<script>
	// import {
	// 	orderApi
	// } from '@/common/user.js';
	// import {
	// 	payApi
	// } from '@/common/user.js';
	// import {
	// 	userApi
	// } from '../../common/user';
	import configUrl from '@/utils/config.js';
	export default {
		name: "WithdrawList",
		data() {
			return {
				dataList:[]	
			};
		},
		onLoad(e) {
			let self = this;
			// self.getList();
			self.queryList(1, 10);
		},
		methods: {
			queryList(pageNo, pageSize) {
				let self = this;
				userApi.getWithdrawList({page: pageNo}).then(res => {
					console.log('获取数据：', res);
					self.$refs.paging.complete(res);
					// self.dataList = res;
				});
			},
			toDetail(e) {
				uni.navigateTo({
					url: '/pages/users/WithdrawInfo?id='+e.id
				});
			},
			formatDateTime(date) {
				let format = 'yyyy/MM/dd HH:mm:ss';
							const o = {
								'M+': date.getMonth() + 1, // 月份
								'd+': date.getDate(), // 日
								'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
								'H+': date.getHours(), // 小时
								'm+': date.getMinutes(), // 分
								's+': date.getSeconds(), // 秒
								'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
								S: date.getMilliseconds(), // 毫秒
								a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
								A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
							};
							if (/(y+)/.test(format)) {
								format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
							}
							for (let k in o) {
								if (new RegExp('(' + k + ')').test(format)) {
								format = format.replace(
									RegExp.$1,
									RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
								);
								}
							}
							return format;
						},
					}
	};
</script>

<style lang="scss" scoped>
	.container {
		// position: absolute;
		display: flex;
		flex-direction: column;
		justify-items: flex-start;
		padding: 0 30rpx;
		height: 100vh;

	}

	.amount-group {
		margin-top: 60rpx;
		margin-bottom: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.payment-remain-time {
		font-size: 24rpx;
		color: #777;
	}

	.payment-amount {
		margin-top: 20rpx;
		color: #fd9036;
		font-size: 40rpx;
	}

	.payment-amount text {
		font-size: 48rpx;
	}

	.payment-timeout-tips {
		font-size: 26rpx;
		color: #777;
		margin-top: 20rpx;
	}

	.payment-selection-group {
		background-color: #FFF;

	}

	.payment-selection-list {
		display: flex;
		flex-direction: column;
	}

	.payment-selection-item {
		display: flex;
		flex-direction: row;
		margin-top: 40rpx;
		align-items: center;
	}

	.image-round {
		width: 60rpx;
		height: 60rpx;
		background-color: #000;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.image-rect {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.payment-name {
		flex: 1;
	}

	.payment-confirm {
		margin-bottom: 30rpx;
		margin-left: 5vw;
		margin-right: 5vw;
		background-color: #fc7404;
		color: #fff;
		border-radius: 30rpx;
		width: 90vw;
	}

	.input-item {
		width: 0rpx;
		height: 0rpx;
	}

	.code-list {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;

		.code-item {
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border: 1rpx solid #eee;
			background-color: #F6F6F6;
			border-radius: 10rpx;
		}
	}
</style>